<template>
	<div class="swiperwrap">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
					<img :src="item.url" />
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>

		<div class="vip">
			<a href="#">立即成为VIP</a>
		</div>
	</div>
</template>

<script>
import Swiper from "swiper";
export default {
	data() {
		return {
			swiperList: [
				{
					name: "swiperSlide1",
					url: "http://img.xiaozhoubg.com/FsjjZZOXjTBeJPf4xsrFrHMkUpcm"
				},
				{
					name: "swiperSlide1",
					url: "http://img.xiaozhoubg.com/FmHvLTBtDJLkzyTehONYBI-72W1u"
				}
			]
		};
	},
	mounted() {
		new Swiper(".swiper-container", {
			// direction: "vertical", // 垂直切换选项
			autoplay: true,

			// 如果需要分页器
			pagination: {
				el: ".swiper-pagination"
			},

			// 如果需要前进后退按钮
			navigation: {
				nextEl: ".swiper-button-next",
				prevEl: ".swiper-button-prev"
			}
		});
	}
};
</script>

<style scoped>
.swiper-container {
	width: 90%;
	height: 3rem;
	margin: 0.2rem auto;
}
.swiper-slide img {
	width: 100%;
	height: 3rem;
}
.vip {
	width: 90%;
	height: 0.6rem;
	line-height: 0.6rem;
	margin: 0.2rem auto;
	padding-right: 0.2rem;
	text-align: right;
	background: linear-gradient(to right, #f9ecc7, #ecd6a6);
	box-sizing: border-box;
	border-radius: 0.1rem;
}
.vip a {
	font-size: 0.2rem;
	color: black;
}
</style>